<template>
  <div id="can1"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { CanvasRenderer } from "echarts/renderers";
import { init, use, dispose } from "echarts/core";
import {
  GridComponent,
  TooltipComponent,
  DatasetComponent,
  TitleComponent,
  GraphicComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";

let myChart, myCanvas;
onMounted(() => {
  use([
    CanvasRenderer,
    GridComponent,
    TooltipComponent,
    DatasetComponent,
    TitleComponent,
    GraphicComponent,
    LineChart,
  ]);
  myCanvas = document.getElementById("can1");
  myChart = init(myCanvas);
  let option = {
    title: {
      text: "增加水印",
      left: "center",
    },
    xAxis: {
      type: "category",
    },
    yAxis: {},
    tooltip: {},
    graphic: [
      {
        type: "group",
        right: 100,
        bottom: 100,
        rotation: Math.PI / 4,
        bounding: "raw",
        z: 100,
        children: [
          {
            type: "rect",
            left: "center",
            top: "center",
            z: 100,
            shape: {
              width: 400,
              height: 50,
            },
            style: {
              fill: "rgba(0,0,0,.3)",
            },
          },
          {
            type: "text",
            left: "center",
            top: "center",
            z: 100,
            style: {
              text: "ECHARTS LINE CHART",
              fill: "white",
              font: "bold 26px sans-serif",
            },
          },
        ],
      },
      {
        type: "group",
        left: '10%',
        top: "center",
        z: 100,
        children: [
          {
            type: "rect",
            top: 'middle',
            left: 'center',
            z: 100,
            shape: {
              width: 230,
              height: 90,
            },
            style: {
              fill: "white",
              stroke: "#000",
              lineWidth: 1,
            shadowBlur: 8,
            shadowOffsetX: 3,
            shadowOffsetY: 3,
            shadowColor: 'rgba(0,0,0,0.2)'
            },
          },
          {
            type: 'text',
            top: 'middle',
            left: 'center',
            z: 100,
            style: {
                width: 220,
                text: 'xAxis represents temperature in °C, yAxis represents altitude in km, An image watermark in the upper right, This text block can be placed in any place',
                overflow: 'break',
                font: '14px Microsoft YaHei'
            }
          }
        ],
      },
    ],
    dataset: {
      // 二维数组，其中第一行/列可以给出 维度名，也可以不给出，直接就是数据：
      source: [
        ["product", "2015", "2016", "2017"],
        ["Matcha Latte", 43.3, 85.8, 93.7],
        ["Milk Tea", 83.1, 73.4, 55.1],
        ["Cheese Cocoa", 86.4, 65.2, 82.5],
        ["Walnut Brownie", 72.4, 53.9, 39.1],
      ],
    },
    series: [
      {
        type: "line",
      },
      {
        type: "line",
      },
      {
        type: "line",
      },
    ],
  };
  myChart.setOption(option);
});

onUnmounted(() => {
  dispose(myChart);
  myChart = null;
});
</script>

<style>
#can1 {
  width: 800px;
  height: 400px;
}
</style>
